<script setup lang="ts">
import { provide, toRef, useTemplateRef } from 'vue'
import Video1 from './video1.vue'
import VideoItem from '../../components/item1/video2_3.vue'
import { leftTextRefKey, video1ContainerKey } from './symbol-key.ts'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { getImgSrc } from '@/views/product/reno14-pro/image/4/img-src.ts'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { scrollGroup } = useScrollGroup()

const leftTextRef = useTemplateRef<HTMLDivElement | null>('leftTextRef')
provide(
  leftTextRefKey,
  toRef(() => leftTextRef.value),
)
const video1ContainerRef = useTemplateRef<HTMLDivElement | null>('video1ContainerRef')
provide(
  video1ContainerKey,
  toRef(() => video1ContainerRef.value),
)

const leftContainerRef = useTemplateRef<HTMLDivElement | null>('leftContainerRef')
const lastVideoRef = useTemplateRef<HTMLDivElement | null>('lastVideoRef')

useGsapContext(() => {
  if (!leftTextRef.value || !lastVideoRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: leftTextRef.value,
    endTrigger: lastVideoRef.value,
    start: 'center center',
    end: '71% center',
    pin: leftContainerRef.value,
    invalidateOnRefresh: true,
    ...scrollGroup,
  })
})
</script>

<template>
  <div class="mx-[clamp(4rem,1.5rem+3.9063vw,5.25rem)]">
    <div class="max-w-[60%] mx-auto text-center">
      <p class="text-[clamp(2.625rem,-0.625rem+5.0781vw,4.25rem)] leading-[1.2]">
        实况照片引领者
        <br />
        放大此刻生命力
      </p>
      <p class="text-[clamp(0.875rem,0.125rem+1.1719vw,1.25rem)] mt-[0.875rem]">
        让照片 Live 起来，Get 当季最潮玩法。高清长焦实况照片、4K
        视频转实况照片、闪光实况照片，有三合一 Live 图神机在手，各种潮流玩法一台 Reno 就够。
      </p>
    </div>

    <div class="mt-[5.25rem] video-area">
      <div
        ref="leftContainerRef"
        class="[grid-area:left-text] h-[57.85vw] grid justify-items-center"
      >
        <div
          ref="leftTextRef"
          class="self-end text-[clamp(1.875rem,-0.375rem+3.5156vw,3rem)] leading-[1.28] relative"
        >
          <p>高清长焦实况照片</p>
          <p>放大拍实况</p>
          <p>更有生命力</p>
        </div>
      </div>

      <div ref="video1ContainerRef" class="[grid-area:video1]">
        <Video1 />
      </div>

      <div class="[grid-area:video1-desc] h-[57.85vw] grid items-end">
        <div class="py-[3.75rem]">
          <p class="text-[clamp(1.125rem,0.375rem+1.1719vw,1.5rem)]">特写情绪细节</p>
          <p
            class="text-[clamp(0.75rem,0.25rem+0.7813vw,1rem)] text-white opacity-75 leading-[1.66]"
          >
            潜望长焦放大拍，定格主角特写。避开人群自由构图，让美好不分淡旺季。
          </p>
        </div>
      </div>

      <div class="[grid-area:video2]">
        <VideoItem
          :video-src="getImgSrc('videos-photogtaphy-c1-2-pc.mp4')"
          main-title="人美，景也美"
          subtitle="85mm 黄金焦段，拉近身后的美好，人与景更合拍。"
        />
      </div>

      <div ref="lastVideoRef" class="[grid-area:video3]">
        <VideoItem
          class="mt-[clamp(5.625rem,-5.125rem+16.7969vw,11rem)]"
          :video-src="getImgSrc('videos-photogtaphy-c1-3-pc.mp4')"
          main-title="抓拍也清晰"
          subtitle="旗舰级双重曝光，定格超清封面，动态纤毫毕现。"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.video-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'left-text video1 video1-desc'
    'left-text video2 video3';
  gap: clamp(1.875rem, -2.125rem + 6.25vw, 3.875rem);
}
</style>
